<template>
	<div>
		<el-form
			:model="billData"
			:rules="rules"
			ref="billData"
			label-width="0px"
			class="demo-curData"
			:inline="true"
		>
			<div class="reset-zero">
				<el-button type="primary" @click="resetForm('billData')">
					一键重置为零
				</el-button>
			</div>
			<!-- {{ billData }} -->
			<div class="title">会员信用账单详情</div>
			<div class="contentBox mt30 mb10">
				{{
					cycleDate.cycleStartDate &&
					dayjs(String(cycleDate.cycleStartDate)).format('YYYY-MM-DD')
				}}
				00:00:00 至
				{{
					cycleDate.cycleEndDate &&
					dayjs(String(cycleDate.cycleEndDate)).format('YYYY-MM-DD')
				}}
				23:59:59
			</div>

			<TeamBillTable :data.sync="memberBill" />

			<!-- 本期盈亏 -->
			<ProfitTable
				:data.sync="memberBillDetail"
				:netAmount="memberBill.netAmount"
			/>

			<!-- 其他资金变动 -->
			<OtherAmountChangeTable :data.sync="memberBillDetail" />

			<div class="footer">
				<el-button
					type="primary"
					@click="submitForm('billData')"
					:loading="submitLoading"
				>
					提交修改
				</el-button>
			</div>
		</el-form>

		<GoogleKeyInput
			:isShowdialog="isShowdialog"
			@getGoogleKey="getGoogleKey($event)"
			@backPrevStep="backPrevStep()"
		></GoogleKeyInput>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
export default {
  components: {
    GoogleKeyInput: () => import('@/components/GoogleKeyInput'),
    TeamBillTable: () => import('./teamBillTable.vue'),
    ProfitTable: () => import('./profitTable.vue'),
    OtherAmountChangeTable: () => import('./otherAmountChangeTable.vue')
  },
  mixins: [list],
  props: {
    value: {
      type: Object,
      default: () => { }
    },
    params: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      dayjs,
      submitLoading: false,
      cycleDate: {},
      memberBill: {},
      memberBillDetail: {},
      loading: false,
      rules: {},
      isShowdialog: false
    }
  },
  computed: {
    billData() {
      return {
        cycleDate: this.cycleDate,
        memberBill: this.memberBill,
        memberBillDetail: this.memberBillDetail
      }
    }
  },
  created() {
    this.queryData(this.params)
  },
  methods: {

    getGoogleKey(data) {
      this.isShowdialog = false
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.submitLoading = true
      this.$api
        .reportBillAdjustMemberUpdate({
          cycleDate: this.cycleDate,
          googleAuthCode: data,
          memberBill: this.memberBill,
          memberBillDetail: this.memberBillDetail,
          memberName: this.memberBill.memberName
        })
        .then((res) => {
          loading.close()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.queryData(this.params)
          this.submitLoading = false
        })
        .catch((e) => {
          loading.close()
          this.submitLoading = false
        })
    },
    backPrevStep() {
      this.isShowdialog = false
    },
    resetForm(formName) {
      console.log(this.$refs[formName])
      this.$refs[formName].resetFields()
    },
    // 提交修改
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isShowdialog = true
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    async queryData(params) {
      try {
        const res = await this.$api.reportBillAdjustMemberQuery(params)
        console.log(res)
        const resData = res.data
        this.cycleDate = { ...res.data.cycleDate }
        const memberBill = { ...resData.memberBill }
        memberBill['name'] = 'memberBill'
        this.memberBill = memberBill

        const memberBillDetail = { ...res.data.memberBillDetail }
        memberBillDetail['name'] = 'memberBillDetail'
        this.memberBillDetail = memberBillDetail
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-icon-question:after {
	font-size: 16px;
	margin-left: 0;
}
::v-deep .el-form-item {
	margin-bottom: 0;
}
.reset-zero {
	display: flex;
	justify-content: flex-end;
}
.title {
	text-align: center;
	font-size: 28px;
	font-weight: bold;
}
.footer {
	display: flex;
	justify-content: flex-end;
}
.contentBox {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}
.childer-box {
	width: 100%;
	display: flex;
	.silder {
		width: 25%;
		padding-right: 20px;
		.row {
			margin-top: 20px;
			.switch {
				cursor: pointer;
			}
		}
		.display-tow {
			display: flex;
			justify-content: space-between;
		}
		.lower-user {
			padding-left: 30px;
			margin-top: 10px;
			box-sizing: border-box;
			.list {
				padding: 5px 0;
			}
			.active {
				background: rgba(129, 211, 248, 1);
				color: #ffffff !important;
			}
		}
	}
	.table-content {
		width: 100%;
	}
}
</style>
